<template>
    <div class="page-container"
        :class="{'main-light': !$store.state.isDarkMode, 'main-dark': $store.state.isDarkMode}"
    >
        <back-header title="登录"/>

        <header>
            <img src="../assets/logo.png" alt="">
            <span class="title">BiliPili</span> 
        </header>

        <div class="inputArea">
            <search-input class="input" placeholder="UID" :getContent="getContentUID"/>
            <search-input class="input" placeholder="密码" :getContent="getContentPasswd"/>
        </div>
        <h2 v-show="isLoginFall">登陆失败！请重新是否填写正确</h2>
        <div class="loginBtn" @click="onLogin()">
            登录
        </div>
        
    </div>
</template>

<script>
import SearchInput from './SearchInput.vue';
import BackHeader from './BackHeader.vue';

export default {
    name: 'LoginPage', 
    props:["Login"],
    components: {
        SearchInput,
        BackHeader
    },
    data(){
        return{
            uid: '',
            password: '',
            isLoginFall: false,
        }
    },
    methods:{
        getContentUID(value){
            this.uid = value
        },
        getContentPasswd(value){
            this.password = value
        },
        onLogin(){
            if(this.Login(this.uid, this.password)){
                this.isLoginFall = false
                this.$router.push('/myPage')
            }else{
                this.isLoginFall = true
            }
        },
    }
}
</script>

<style scoped lang="less">
h2 {
    color: pink;
    margin: 20px;
    font-size: 20px;
    text-align: center;
}
header {
    height: 100px;
    display: flex;
    overflow: hidden;
    vertical-align: middle;
    margin: 10vh auto;
    width: 300px;

    .title {
        line-height: 100px;
        color: rgb(240, 43, 76);
        font-size: 50px;
        margin-left: 20px;
        font-weight: bold;
        text-shadow: 2px 2px 1px rgb(131, 131, 131);
    }
}

.inputArea {
    .input {
        margin: 10px auto;
    }
}

.loginBtn {
    height: 100px;
    width: 100px;
    background-image: linear-gradient(rgb(255, 84, 113),rgb(165, 46, 66));
    border-radius: 50px;
    overflow: hidden;
    line-height: 100px;
    text-align: center;
    margin: 50px auto;

    font-size: 20px;
    color: azure;
}
</style>